﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" id="public_Head">
    <meta charset="UTF-8">
    <title>账单管理系统</title>
<!--    <link rel="stylesheet" href="../css/public.css"/>-->
    <link rel="stylesheet" th:href="@{/css/public.css}"/>
    <link rel="stylesheet"  th:href="@{/css/style.css}"/>
    <link rel="stylesheet"  th:href="@{/css/db.css}"/>
    <style>
        .publicHeader {
            height: 48px;
            line-height: 48px;
            font-size: 14px;
            background: linear-gradient(to bottom, #e0e0e0, #209cff 0%, #68e0cf 100%);
            background: -webkit-linear-gradient(to bottom, #e0e0e0, #209cff 0%, #68e0cf 100%);
            background: -moz-linear-gradient(to bottom,#e0e0e0, #209cff 0%, #68e0cf 100%);
            background: -ms-linear-gradient(to bottom, #e0e0e0, #209cff 0%, #68e0cf 100%);
            /*background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);*/
        }
        .search input[type='button']:focus{
            /* 移除焦点轮廓 */
            outline: none;
            /* 设置按钮在获得焦点时的背景颜色 */
            background-color: #faca0d;
        }
        .search input[type='button']{
            /* 设置按钮左边距 */
            margin-left: 20px;
            /* 设置按钮宽度 */
            width: 100px;
            /* 设置按钮内边距，左右各20px */
            padding: 0 20px;
            /* 设置按钮高度 */
            height: 30px;
            /* 设置按钮边框样式，颜色为#7ba92c，宽度为1px，实线样式 */
            border: 1px solid #bd644e;
            /* 设置按钮圆角半径 */
            border-radius: 4px;
            /* 设置按钮文字颜色 */
            color: #fff;
            /* 设置按钮文字加粗 */
            font-weight: bold;
            /* 设置按钮背景色和背景图片，图片位于按钮内10px中心位置，不重复显示 */
            background:#83d1f5 url("/img/search.png") 10px center no-repeat;
        }
    </style>
</head>
<body id="body">
<!--头部-->
    <header style="" class="publicHeader" id="public_Header">
        <h1>账单管理系统</h1>
        <div class="publicHeaderR">
            <p><span id="hours">下午好！</span> , 欢迎你！</p>
            <a th:href="@{/logout}">退出</a>
        </div>
    </header>
<!--时间-->
    <section class="publicTime" id="public_Time">
        <span id="time">2024年12月15日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
<!--主体内容-->
    <section class="publicMian ">
        <div class="left" id="public_Left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
            <ul class="list">
                <!-- 根据activeUri的值动态设置id为'active'，以高亮显示当前选中的菜单项 -->
                <!--
    该列表项（li）用于显示账单管理的链接，根据当前活动的URI来决定是否高亮显示该项。
    - 使用Thymeleaf的条件表达式为li元素动态设置id，以实现菜单项的高亮显示。
    - 当activeUri变量的值等于'bill'时，将li元素的id设置为'active'，否则不设置id。
    - 包含一个超链接（a），指向账单管理页面（/bill/list.html），显示文本为“账单管理”。
-->
                <li   th:id="${activeUri == 'bill' ? 'active' : ''}" id="active"><a th:href="@{/bills}" href="../bill/list.html">账单管理</a></li>
                <li   th:id="${activeUri == 'provider' ? 'active' : ''}"><a th:href="@{/providers}">供应商管理</a></li>
                <li   th:id="${activeUri == 'user' ? 'active' : ''}"><a th:href="@{/users}">用户管理</a></li>
                <li   th:id="${activeUri == 'pwd' ? 'active' : ''}"><a  th:href="@{/usermm}">密码修改</a></li>
                <li   th:id="${activeUri == 'lxwm' ? 'active' : ''}"><a  th:href="@{/lxwm}">联系我们</a></li>
                <!-- 提供退出系统的链接 -->
                <li><a th:href="@{/logout}">退出系统</a></li>
            </ul>
            </nav>
        </div>
        <div class="right">
           公共页面
        </div>
    </section>
    <footer class="footer" id="public_Footer"style=" padding:40px 0; font-family: Arial, sans-serif; background-image: linear-gradient(180deg, #83d1f5 0%,#d4cec6, #e2ecf5 100%);">
        <div style="text-align:center;">
        <div class="github-badge" >
        <span class="badge-subject">网站托管</span>
        <a  href="https://www.ggd.cc" rel="external nofollow"  target="_blank">
            <span class="badge-value bg-cai">级级盾</span></a>
        </div>

        <div class="github-badge">
            <span class="badge-subject">申请</span>
            <a  href="#" rel="external nofollow"  target="_blank">
                <span class="badge-value bg-fen">友情链接</span></a>
        </div>
        <div class="github-badge">
            <span class="badge-subject">免责声明 </span>
            <a  href="#" rel="external nofollow"  target="_blank">
                <span class="badge-value bg-red">点击查看</span></a>
        </div>
        <div class="github-badge">
            <span class="badge-subject">用户协议</span>
            <a  href="#" rel="external nofollow"  target="_blank">
                <span class="badge-value bg-cai">点击查看</span></a>
        </div>
        </div>
            <div class="container">
                <div class="row">
                    <!-- 额外的内容 -->
                    <div class="col-md-3">
                        <h5 style="font-weight: bold;color: #0d2d54">订阅我们的新闻</h5>
                        <p style="color: #0d2d54">获取最新动态和优惠信息，直接发送到您的邮箱。</p>
                        <form action="/subscribe" method="POST">
                            <div class="input-group">
                                <input type="email" class="form-control" placeholder="输入您的邮箱" name="email" required>
                                <div class="input-group-append">
                                    <button style="color: #0d2d54" class="btn btn-primary" type="submit">订阅</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 底部版权信息 -->
                <hr>
                <div class="text-center" style="font-size: 14px;">
                    <p style="color: #0d2d54">© 2024 [玛卡巴卡] 版权所有</p>
                    <p style="color: #0d2d54">技术支持：<a style="color: #0d2d54" href="http://www.example.com" target="_blank" >[花园宝宝]</a></p>
                </div>
            </div>

        <!-- 引入 Font Awesome 图标库 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    </footer>
<div class="wave"></div>
<script src="js/time.js"></script>
	<!--
	<script src="js/time.js"></script>
	-->
</body>
</html>